import React, { useState } from "react";
import { FC } from "react";
import type { IMarketProps } from "./index";

//TODO: 去掉any
const InitComponent: FC<IMarketProps> = (props: any) => {
  const [chatVisiable, setChatVisiable] = useState(false);
  const [currentModel, setCurrentModel] = useState("");

  const style = {
    width: "100%",
    height: "100%",
    minHeight: "700px",
  };
  const handleClick = (e: React.MouseEvent) => {
    if (e.target?.dataset.key) {
      setCurrentModel(e.target?.dataset.key);
    }
    // setTimeout(() => {
    //   props.onClick();
    // }, 1000);
    setChatVisiable(!chatVisiable);
  };
  return (
    <>
      {!chatVisiable ? (
        <section
          className="flex items-center justify-items-center w-full justify-around mt-6"
          onClick={handleClick}
        >
          <section
            className="h-24 bg-sky-400 w-80 rounded-sm flex item-center justify-center text-xl items-center text-slate-50"
            data-key="model1"
          >
            模型1
          </section>
          <section
            className="h-24 bg-blue-200 w-80 rounded-sm flex item-center justify-center text-xl items-center text-slate-50"
            data-key="model2"
          >
            模型2
          </section>
          <section
            className="h-24 bg-cyan-300 w-80 rounded-sm flex item-center justify-center text-xl items-center text-slate-50"
            data-key="model3"
          >
            模型3
          </section>
        </section>
      ) : (
        <section className="w-full">
          <iframe
            src="http://10.7.29.101/chatbot/1sjBBVia3U7FLEHr"
            style={style}
            frameborder="0"
            allow="microphone"
          ></iframe>
        </section>
      )}
    </>
  );
};

export default InitComponent;
